<template>
  <div>
    <svg
      :id="'markmap' + markmapid"
      ref="markmap"
      :style="{
        width: '100%',
        height: computeheight,
      }"
    ></svg>
  </div>
</template>

<script>
import { Transformer } from "markmap-lib";
import { Markmap } from "markmap-view";
import { mapGetters } from "vuex";
export default {
  name: "MarkdownRenderer",
  props: {
    content: {
      type: String,
      required: true,
    },
    contentwidth: {
      type: String,
      default: "",
    },
    markmapid: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      Markmapdata: null,
    };
  },
  computed: {
    ...mapGetters(["device"]),
    computeWidth() {
      let width =
        this.device === "mobile"
          ? document.documentElement.clientWidth - 150
          : 300;
      return width + "px";
    },
    computeheight() {
      const clientHeight = document.documentElement.clientHeight - 120;

      let height = this.contentwidth === "full" ? clientHeight + "px" : "300px";
      return height;
    },
  },
  mounted() {
    //  this.renderMarkmap(this.content);
  },
  watch: {
    content(val, old) {
      this.$nextTick(this.renderMarkmap(val));
    },
  },
  methods: {
    renderMarkmap(val) {
      // console.log(val, "val:::::", this.Markmapdata);
      // if (!val) return;
      const transformer = new Transformer();
      const { root } = transformer.transform(val);

      if (!this.Markmapdata) {
        this.Markmapdata = Markmap.create(this.$refs.markmap, null, root);
      } else {
        this.Markmapdata.setData(root);
      }
    },
  },
};
</script>